<template>
  <view class="tab tab-view">
    <block v-for="(a, b) in list" :key="b">
      <text
          class="t0"
          :class="{ 'select-text': b === selectTabIndex }"
          @click="onSelectTabIndex(a.index, b)"
      >
        <view>{{ a.name }}</view>
      </text>
    </block>
  </view>
</template>

<script>
export  default {
  props:{
    //tabs列表
    list:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data(){
    return {
      selectTabIndex:0
    }
  },
  methods:{
    async onSelectTabIndex(index, b) {
      this.selectTabIndex = b
      this.$emit('select',index,b)
    }
  }
}
</script>

<style scoped lang="scss">
.tab {
  width: auto;
  background: #d6d6d6;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  height: 66rpx;
  border-radius: 32rpx;
  .t0{
    width: 33.33%;
    font-family: PingFang;
    font-weight: 500;
    color: #222;
    text-align: center;
    line-height: 66rpx;
    height: 66rpx;
    font-size: 29rpx;
    padding-left:16rpx;
  }
  .select-text {
    width: 82rpx;
    background: #E9E9E9;
    border-radius: 32rpx;

  }
  view {
    width: 58rpx;
    font-size: 29rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #222222;
  }
}
</style>
